<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/15
  Time: 17:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>影视分析平台</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main_css.css">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ihdnrGRX1wZeOWEG6aGfYad8j9ppIggK"></script>
</head>
<body>








<div id="app1">






    <%--地图展示模态框--%>
    <div  class="modal fade" id="showMapModal" tabindex="-1" role="dialog" aria-labelledby="loginErrorModal" aria-hidden="true">
        <div  class="modal-dialog" role="document">
            <div style="width: 700px;height: 700px" class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="loginErrorModal1">{{map1}}</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body alert ">
                    <div class="col-lg-6">  <div id="containermap2" style="height: 500px;width: 600px"></div></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>




    <%--导航栏--%>
    <nav class="main_daohanglan navbar navbar-expand-sm fixed-top navbar-light">


        <!-- Brand/logo -->
        <a class="" href="#">
            <img class="main_touxiang rounded" :src="user.uImg" alt="logo" style="width:60px;">
        </a>
        <h4 class="active">&nbsp;&nbsp;{{user.uName}}</h4>
        <!-- Links -->
        <ul class="navbar-nav ml-auto">

            <li class="nav-item ">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item" @click="toCart">
                <a class="nav-link" href="#"><div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-basket2" viewBox="0 0 16 16">
                        <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0v-2z"/>
                        <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6H2.163z"/>
                    </svg>
                </div></a>
            </li>
        </ul>

    </nav>


    <%--主内容--%>
    <div class="container-fluid main">
        <div class="row">


            <%--            左侧副导航栏--%>
            <div class="col-md-2 sidebar">
                <div class="container">
                    <div class="row" style="padding-top: 10%">
                        <div class="col-lg-12 text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" style="color: #4FC3F7;margin-bottom: 20px"
                                 width="56" height="56" fill="currentColor" class="bi bi-clipboard-data"
                                 viewBox="0 0 16 16">
                                <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/>
                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                            </svg>
                        </div>
                    </div>
                    <hr>
                    <div class="row" style="margin-top: 50px;margin-left: 18%">

                        <ul class="list-group list-group-flush" style="position: relative">
                            <li class="list-group-item  chuizhi_li" @click="toMe">我的主页
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-person-circle" viewBox="0 0 16 16">
                                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                        <path fill-rule="evenodd"
                                              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li">我的好友 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-emoji-sunglasses" viewBox="0 0 16 16">
                                        <path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z"/>
                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" @click="toMovie">商品列表 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" style="border-bottom: 3px solid #4FC3F7;">商品分析
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item">
                            </li>

                        </ul>


                    </div>

                </div>
            </div>


            <%--    右侧内容区--%>
            <div class="col-md-10 content float-right">


                <div class="container">
                    <%--                    电影评分分布--%>
                    <div class="row mt-2">
                        <div class="card col-lg-6">
                            <div class="card-body" id="pingfen1" style="width: 600px;height:400px;"></div>
                            <div class="card-header">{{map1}}可以看出豆瓣电影的评分分布情况基本是符合正态分布的，大部分的分值还是集中在8.7到8.9分之间，较低的8.3分和较高的9.7分则较少</div>
                        </div>



                    </div>
                    <%--电影地区分布--%>
                    <div class="row mt-2">
                        <div class="card col-lg-6" >
                            <div class="card-body" id="diqu" style="width: 600px;height:400px;"></div>
                            <div class="card-header">可以看出豆瓣电影的地区分布情况基本是跟国家经济情况成正相关</div>
                        </div>


                    </div>
<%--鞋类品牌分布--%>
                    <div class="row mt-2">
                        <div class="card col-lg-6" >
                            <div class="card-body" id="pinpai" style="width: 600px;height:400px;"></div>
                            <div class="card-header">可以看出豆瓣电影的地区分布情况基本是跟国家经济情况成正相关</div>
                        </div>
                    </div>

                </div>
            </div>


        </div>


    </div>


</div>



<script>


    let app = new Vue({
        el: "#app1",
        data() {
            return {
                user: JSON.parse(localStorage.getItem("user")),
                map1:localStorage.getItem("position")
            }
        },
        methods: {
            toMe() {
                window.location.href = "main.jsp"
            },
            toMovie() {
                window.location.href = "shop.jsp"
            },
            toCart(){
                axios.post("${pageContext.request.contextPath}/cart/findAllShops").then(function (response) {
                    if (response.data=="1"){
                        window.location.href="basket.jsp"
                    }else {
                        alert("chabudao")
                    }
                })
            }
        }
    })




    let myChart = echarts.init(document.getElementById("pingfen1"), 'light');
    let myChart2 = echarts.init(document.getElementById("diqu"), "light");
    let myChartpinpai = echarts.init(document.getElementById("pinpai"),"light");


    // 指定图表的配置项和数据
    let option = {
        title: {
            text: '地区分布'
        },
        tooltip: {},
        legend: {
            data: ['数量']
        },
        xAxis: {
            data: ["中国", "日本", "美国", "英国", "德国", "韩国", "印度", "丹麦", "伊朗", "加拿大", "巴西", "澳大利亚", "波兰", "泰国"],
            axisLabel: {
                interval:0,
                rotate:45 //代表逆时针旋转45度
            }
        },
        yAxis: {},
        color: ['#0385c3'],
        series: [{
            name: '数量',
            type: 'bar',
            data: [57, 34, 138, 33, 19, 11, 4, 1, 2, 6, 1, 4, 1, 1]
        }]
    };


    let option2 = {
        title: {
            text: '评分分布'
        },
        tooltip: {},
        legend: {
            data: ['数量']
        },
        xAxis: {
            data: ["8.3", "8.4", "8.5", "8.6", "8.7", "8.8", "8.9", "9.0", "9.1", "9.2", "9.3", "9.4", "9.5", "9.6", "9.7"]
        },
        yAxis: {},
        color: ['#0385c3'],
        series: [{
            name: '数量',
            type: 'bar',
            data: [1, 6, 14, 28, 39, 44, 30, 22, 19, 22, 14, 4, 4, 2, 1]
        }]
    };




    let optionpinpai = {
        title: {
            text: '品牌分布'
        },
        tooltip: {},
        legend: {
            data: ['数量']
        },
        xAxis: {
            data: ['ASICS',
                'Adidas',
                'CONVERSE',
                'Lining',
                'NIKE',
                'Nike',
                'Onitsuka',
                'PUMA',
                'Skechers',
                'VANS'
            ]
        },
        yAxis: {},
        color: ['#0385c3'],
        series: [{
            name: '数量',
            type: 'bar',
            data: [24,
                	1,
                	2,
                	1,
                	4,
                	1,
                	1,
                	4,
                	10,
                	1]
        }]
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option2);
    myChartpinpai.setOption(optionpinpai);
    myChart2.setOption(option);
    myChart2.on('click', function(params) {
        localStorage.setItem("position",params.name)
        mapposition = localStorage.getItem("position")
        app.$data.map1=mapposition
        $("#showMapModal").modal(focus)


        // 创建地图实例

        let map2 = new BMap.Map("containermap2");

        // 创建点坐标 （北京天安门坐标）


        // 初始化地图，设置中心点坐标和地图级别


        map2.centerAndZoom(mapposition, 7);
        map2.addControl(new BMap.NavigationControl());
        map2.addControl(new BMap.ScaleControl());
        map2.addControl(new BMap.OverviewMapControl());
        map2.addControl(new BMap.MapTypeControl());


    });






</script>

</body>
</html>
